<template>
    <v-sheet
        class="playlist-item"
        :class="{
            'playlist-item-focus': focused,
            'playlist-item-border': index % 2 === 1,
        }"
        rounded="xl"
        v-ripple
    >
        <!-- 选择框 -->
        <span class="normal-content" :class="{ 'check-box': !selected }" style="padding-right: 0">
            <v-checkbox-btn :model-value="selected" @update:model-value="(value) => emits('update:selected', value)" />
        </span>

        <!-- Midi 图标 -->
        <span class="icon-wrapper normal-content">
            <v-avatar class="midi-icon" color="primary">
                <v-icon color="surface">mdi-music</v-icon>
            </v-avatar>
            <v-avatar class="play-icon" :color="focused ? 'error' : 'secondary'" @click="emits('togglePlay')">
                <v-icon color="surface">
                    {{ focused && playing ? "mdi-pause" : "mdi-play" }}
                </v-icon>
            </v-avatar>
        </span>

        <!-- Midi 名称 -->
        <span class="normal-content expanded-content" @dblclick="emits('togglePlay')">
            {{ item.name }}
        </span>

        <!-- Midi 时长 -->
        <span class="normal-content expanded-content" @dblclick="emits('togglePlay')">
            {{ formatDuration(item.duration / 1000, FormatLanguage.Chinese) }}
        </span>

        <!-- 菜单 -->
        <span class="normal-content">
            <playlist-item-menu @move-up="emits('moveUp')" @move-down="emits('moveDown')" @remove="emits('remove')" />
        </span>
    </v-sheet>
</template>

<script setup lang="ts">
import { type PropType, UnwrapNestedRefs } from "vue";
import { formatDuration, FormatLanguage } from "@/lib/utils";
import type { MidiItem } from "@/lib/midi";
import PlaylistItemMenu from "./PlaylistItemMenu.vue";

defineProps({
    index: {
        type: Number,
        required: true,
    },
    item: {
        type: Object as PropType<UnwrapNestedRefs<MidiItem>>,
        required: true,
    },
    selected: {
        type: Boolean,
        default: false,
    },
    focused: {
        type: Boolean,
        default: false,
    },
    playing: {
        type: Boolean,
        default: false,
    },
});

const emits = defineEmits<{
    (event: "update:selected", state: boolean): void;
    (event: "togglePlay"): void;
    (event: "moveUp"): void;
    (event: "moveDown"): void;
    (event: "remove"): void;
}>();
</script>

<style scoped lang="scss">
.playlist-item {
    margin: 0 8px;
    padding: 8px 0;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    user-select: none;
    border-width: 1px;

    .normal-content {
        padding: 0 8px;
    }

    .expanded-content {
        width: 0;
        flex-grow: 1;
    }

    .check-box {
        opacity: 0;
        transition-property: opacity;
        transition-duration: 0.3s;
        transition-timing-function: ease;
    }

    .icon-wrapper {
        position: relative;
        --midi-icon-opacity: 1;
        --play-icon-opacity: 0;
    }

    .midi-icon {
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        opacity: var(--midi-icon-opacity);
    }

    .play-icon {
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: absolute;
        left: 8px;
        opacity: var(--play-icon-opacity);
        cursor: pointer;
    }

    &:hover {
        background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));

        > .check-box {
            max-width: 48px;
            opacity: 1;
            transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1), ease;
        }

        > .icon-wrapper .midi-icon {
            opacity: 0;
        }

        > .icon-wrapper .play-icon {
            opacity: 1;
        }
    }
}

.playlist-item-focus {
    color: rgb(var(--v-theme-error));
    font-weight: bold;

    .icon-wrapper {
        --midi-icon-opacity: 0 !important;
        --play-icon-opacity: 1 !important;
    }
}

.playlist-item-border {
    border-color: transparent;
}
</style>
